<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>prop属性</title>
</head>
<body>

<div id="persons"></div>
<div id="persons2"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/javascript" src="../js/prop-types.js"></script>

<script type="text/babel">

    /*
  需求: 自定义用来显示一个人员信息的组件, 包含姓名，性别，年龄
    1). 如果性别没有指定, 默认为男
    2). 如果年龄没有指定, 默认为18
    */

    //1. 定义组件类
    function Person(props) {
        return(
            <ul>
                <li>姓名：{props.name}</li>
                <li>性别：{props.sex}</li>
                <li>年龄：{props.age}</li>
            </ul>
        )
    }

    // 对标签属性进行限制,prop-types.js库来支持
    Person.propTypes = {
        name: PropTypes.string.isRequired,
        sex: PropTypes.string,
        age: PropTypes.number
    }

    // 指定属性的默认值
    Person.defaultProps = {
        age: 18,
        sex: '男'

    }

    //2. 渲染组件标签
    const p1 = {
        name: '临江仙',
        age:32,
        sex:'男'
    }

    const person = {
        name: '鹊桥仙',
        age:22,
        sex:'女'
    }

    /**
     *
     * ... 的作用：
     * 1 打包
     * 2 解包
     */

    const p2 = {
        name: '水龙吟'
    }

    //ReactDOM.render(<Person name={p1.name} age={p1.age} sex={p1.sex} />, document.getElementById('persons'))
    //简略写法，等同上面
    ReactDOM.render(<Person {...person}/>, document.getElementById('persons'))

    ReactDOM.render(<Person name={p2.name}/>, document.getElementById('persons2'))


</script>
</body>
</html>